<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>

<div id="app">
  <h3 style="text-align: center;">Waver 显示器</h3>
  <div class="container">
    <div class="display">
      <canvas height="510" width="1000" class="canvas" ref="canvas"></canvas>
    </div>
    <div class="info">
      <div>
        <span>采样率: </span>
        <span>{{waver.size}}</span>
      </div>
      <div>
        <span>采样频率: </span>
        <span>{{waver.peroid}} ms</span>
      </div> 
      <div>
        <span>采样时长: </span>
        <span>{{waver.duration}} ms</span>
      </div> 
      <div>
        <span>刷新频率: </span>
        <span>{{waver.interval}} ms</span>
      </div>
      <div>
        <span>显示范围: </span>
        <span>{{waver.range}} ms</span>
      </div>
      <div>
        <span>当前显示范围: </span>
        <span>{{(waver.currentTimeRange[0] / 1000).toFixed(2)}} - {{(waver.currentTimeRange[1] / 1000).toFixed(2)}} s</span>
      </div>
      <div class="divider"></div>
      <div>
        <span>选择显示范围</span>
        <select value="1" @change="onChangeRange">
          <option value="0.2">0.2s</option>
          <option value="0.5">0.5s</option>
          <option value="1">1s</option>
          <option value="2">2s</option>
          <option value="5">5s</option>
          <option value="10">10s</option>
          <option value="30">30s</option>
          <option value="60">1min</option>
          <option value="3600">1hour</option>
        </select>
      </div>
      <div>
        <input v-model="replaySec" type="number">
        <button @click="onReplay">回放</button>
        <button @click="onResume">还原</button>
      </div>
    </div>
  </div>  
</div>
 
  <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
  <script type="module">
    import { Waver } from './waver.js'
    Vue.createApp({
      data () {
        const waver = new Waver()
        waver.on('draw', ({ points }) => {
          const canvas = this.$refs.canvas
          const ctx = canvas.getContext("2d")
          ctx.clearRect(0, 0, canvas.width, canvas.height);
          ctx.strokeStyle = 'blue'
          ctx.strokeWidth = '1px'
          ctx.beginPath()
          const radio = 1000 / points.length
          points.forEach((v, i) => {
            ctx.lineTo(Math.ceil(i * radio), 255 + v)
          })
          ctx.stroke()
          ctx.closePath()
        })
        return {
          waver,
          replaySec: 0
        }
      },
      methods: {
        onChangeRange (e) {
          const value = Number(e.target.value)
          this.waver.scale(Math.ceil(value * 1000))
        },
        onReplay () {
          if (this.replaySec <= 0) return
          this.waver.replay(this.replaySec * 1000)
        },
        onResume () {
          this.replaySec = 0
          this.waver.resume()
        }
      },
      mounted () {
        this.waver.start()
      }
    }).mount('#app')
  </script> 
  
  <style>
    .container {
      margin: 40px auto;
      border: 1px solid #e2e2e2;
      border-radius: 4;
      min-height: 320px;
      display: flex;
    }

    .display {
      border-right: 1px solid #e2e2e2;
      flex: 0 0 auto;
      width: 1000px;
    }

    .canvas {
    }

    .info {
      flex: 0 0 auto;
      width: 240px;
      font-size: 12px;
      padding: 12px 20px;
    }

    .divider {
      height: 1px;
      width: 100%;
      background-color: #e2e2e2;
      margin: 8px 12px;
    }
  </style>
</body>
</html>